<div class="play-panel" [class.show]="showPanel">
  <div class="hd">
    <div class="hdc">
      <h4>播放列表（<span>{{songList.length}}</span>）</h4>
      <div class="add-all">
        <i class="icon mr-1" title="收藏全部"></i>收藏全部
      </div>
      <span class="line"></span>
      <div class="clear-all">
        <i class="icon trush mr-2" title="清除" (click)="onClearSongListEvent()"></i>清除
      </div>
      <p class="playing-name">{{currentSong?.name}}</p>
      <i class="icon close" title="关闭" (click)="onCloseEvent()"></i>
    </div>
  </div>
  <div class="bd">
    <img src="//music.163.com/api/img/blur/109951163826278397" class="imgbg">
    <div class="msk"></div>
    <!-- 歌单列表 -->
    <app-panel-scroll class="list-wrap" [data]="songList" (onScrollEnd)="scrollY = $event">
      <ul>
        <li *ngFor="let item of songList; index as i" [class.current]="currentIndex === i"
          (click)="onChangeSongEvent(item)">
          <i class="col arrow"></i>
          <div class="col name ellipsis" [title]="item.name">{{item.name}}</div>
          <div class="col icons">
            <i class="ico like" title="收藏"></i>
            <i class="ico share" title="分享"></i>
            <i class="ico trush" title="删除" (click)="onDeleteSongEvent(item.id)"></i>
          </div>
          <div class="singers clearfix ellipsis">
            <div class="singer-item ellipsis" *ngFor="let singer of item.ar; last as isLast">
              <a class="col ellipsis" (click)="routerToSingerDetail($event, singer.id)">{{singer.name}}</a>
              <span [hidden]="isLast">/</span>
            </div>
          </div>
          <div class="col duration">{{item.dt / 1000 | timeFormat}}</div>
          <div class="col link" (click)="routerToSongDetail($event, item.id)"></div>
        </li>
      </ul>
    </app-panel-scroll>
    <!-- ./ 歌单列表 -->
    <!-- 歌词 -->
    <app-panel-scroll class="list-lyric" [data]="currentLyricLines">
      <ul>
        <li *ngFor="let item of currentLyricLines; index as i" [class.current]="currentLineNum === i"
          [class.lyric-font-size-large]="currentLineNum === i">
          {{item?.text}}<br />{{item?.textCN}}
        </li>
      </ul>
    </app-panel-scroll>
    <!-- ./ 歌词 -->
  </div>
</div>